<template>
  <div class="addressBook">
    <van-nav-bar
      title="通讯录"
    >
      <van-icon name="friends-o" slot="right" color='white' size='25px' @click="showToast"/>
    </van-nav-bar>
    <div>
      <van-search placeholder="=搜索好友" v-model="value" />
    </div>
    <mt-index-list :show-indicator="true" :height='517'>
      <mt-index-section v-for='(item,index) in book' :key='index' :index="item.index">
        <mt-cell v-for="(itm,idx) in item.info" :key='idx' :title="itm"></mt-cell>
      </mt-index-section>
    </mt-index-list>
   
   
  </div>
</template>

<script>
  export default {
    
    data() {
      return {
        value: '',
        book:[
          {
            index:'',
            url:'',
            info:['新的朋友','群组','新的朋友','新的朋友','新的朋友','新的朋友','新的朋友','新的朋友','新的朋友','新的朋友','新的朋友',]
          },
          {
            index:'a',
            url:'',
            info:['新的朋友']
          },
          {
            index:'b',
            url:'',
            info:['群组']
          },
        ],
      }
    },
    methods: {
      showToast() {
        this.$toast({
          type:'fail',
          position:'bottom',
          message: '123',
        });
      }
    },
  }
</script>

<style scoped lang='less'>
  .addressBook{
    background-color: #e6e6e6;
    min-height: 100vh;
    .van-nav-bar{
      background-color: #5cadff;
      .van-nav-bar__title{
        color: white;
      }
    }
    
    
  }
</style>